import React,{Component} from "react";
import $ from "jquery";
import hljs from 'highlight.js';
import 'highlight.js/styles/googlecode.css'; //样式文件

let str =
    "init(){\n" +
    "$('pre code').each(function(i, block) {\n" +
    "hljs.highlightBlock(block);\n" +
    "})\n" +
    "}";

export default class Article extends Component{
    constructor(){
        super();
        this.showCurrent = this.showCurrent.bind(this);
    }

    componentDidMount(){
        $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }

    showCurrent(event){
        let dom = event.target;
        $('.tabDiv span').removeClass('active');
        $(dom).addClass('active');
    }

    render(){
        let {isShow, Data} = this.props;
        let showClass = isShow ? "show" : "hidden";
        let Tab = Data.map((elt, i)=>{
            return(<span key={i} onClick={this.showCurrent}>{elt}</span>);
        });

        return (
            <section className={`${showClass} main`}>
                <div className="tabDiv">{Tab}</div>
                <div className="wrapper">
                    <span className="tag">可信度80%</span>
                    <div className="btn view"><em></em><span>1234</span></div>
                    <div className="btn agree"><em></em><span>1234</span></div>
                    <header><em>知识点</em><h3>知识点</h3></header>
                    <summary><em>描述</em><p>知识点概要的描述</p></summary>
                    <article>
                        <em>示例</em>
                        <div className="article">
                            <p>知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶顶顶顶顶知识点点的顶顶顶顶</p>
                            <pre><code className="javascript">{str}</code></pre>
                        </div>
                    </article>
                </div>
                <footer><span>创建者：张三三</span><span>创建日期：2018.03.23</span><span>更新时间：2018.03.23 11:28:25</span></footer>
            </section>
        )
    }
}
